/**
 * SuggestionCards - Animated Suggestion Cards
 * 
 * Features:
 * - Staggered animation
 * - Hover effects
 * - Click to send prompt
 */

import { motion } from 'motion/react';
import { ThreadPrimitive } from '@assistant-ui/react';
import { Button } from '@/components/ui/button';
import { Sparkles, Code, FileText, Lightbulb } from 'lucide-react';

interface Suggestion {
  icon: typeof Sparkles;
  title: string;
  label: string;
  action: string;
}

const suggestions: Suggestion[] = [
  {
    icon: Code,
    title: "帮我写代码",
    label: "实现一个 React 组件",
    action: "帮我写一个 React 组件，包含状态管理和事件处理",
  },
  {
    icon: FileText,
    title: "解释技术概念",
    label: "什么是微服务架构？",
    action: "请解释什么是微服务架构，以及它的优缺点",
  },
  {
    icon: Lightbulb,
    title: "代码审查",
    label: "帮我优化这段代码",
    action: "请帮我审查并优化这段代码的性能和可读性",
  },
  {
    icon: Sparkles,
    title: "项目规划",
    label: "制定开发计划",
    action: "帮我制定一个 Web 应用的开发计划和技术选型",
  },
];

export function SuggestionCards() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl">
      {suggestions.map((suggestion, index) => {
        const Icon = suggestion.icon;
        
        return (
          <motion.div
            key={`suggestion-${index}`}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ 
              delay: 0.3 + (index * 0.1),
              duration: 0.4,
              ease: [0.16, 1, 0.3, 1]
            }}
          >
            <ThreadPrimitive.Suggestion
              prompt={suggestion.action}
              send
              asChild
            >
              <Button
                variant="ghost"
                className="group h-auto p-4 justify-start text-left w-full hover:bg-accent/50 hover:border-primary/20 border border-transparent transition-all"
              >
                <div className="flex items-start gap-3 w-full">
                  {/* Icon */}
                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:bg-primary/20 transition-colors">
                    <Icon className="w-5 h-5 text-primary" />
                  </div>
                  
                  {/* Content */}
                  <div className="flex-1 min-w-0">
                    <div className="font-medium text-sm mb-1 group-hover:text-primary transition-colors">
                      {suggestion.title}
                    </div>
                    <div className="text-xs text-muted-foreground truncate">
                      {suggestion.label}
                    </div>
                  </div>
                </div>
              </Button>
            </ThreadPrimitive.Suggestion>
          </motion.div>
        );
      })}
    </div>
  );
}

